/*
            找到html标签、body标签，和挂载的标签
            都给他们统一设置样式
        */
html,body,#app,.el-container,.el-row{
    /*设置内部填充为0，几个布局元素之间没有间距*/
    padding: 0px;
    /*外部间距也是如此设置*/
    margin: 0px;
    /*统一设置高度为100%*/
    height: 100%;
}
.chatbody{
    height:calc(100%);
    margin:15px;
    box-shadow:2px 3px 5px #888888;
}
.toolBar{
    padding:5px 10px;
    height:45px
}
.chatArea{
    height:calc(100% - 45px);
    margin-top:0px;
    /***border-top:1px solid #ccc;***/
    padding:5px;
}
.chatLeft{
    /*border-right:1px solid #ccc;
    height:90%;*/
    height: calc(100% );
    padding:5px;
}
.chatView{
    height:calc(100% - 250px);
    /***border-bottom:1px solid #ccc;**/
    padding:5px;
    background:#fff;
    overflow-y: auto;
}

.inputArea{
    height:240px;
}
.inputForm{
    height:200px;
}
.sendTool{
    text-align:right;
    height:50px;
    line-height:50px;
}

/****
在线用户列表
 */
.chatUserList{
    /***border-bottom:1px solid #ccc;**/
    height:calc(100% - 10px);
    margin:5px 0;
    padding:5px;
    background:#fff;
}
.userTitle{
    border-bottom: 1px solid #dfdfdf;
    font-size:16px;
    padding:5px 0;
    clear:both;
}
.clearfix{
    clear:both;
}
.userTitle .title{
    float:left;
}
.userBtnArea{
    float:left;
    margin-left:10px;
    margin-top:-5px;
}
.chatUserList ul li{
    list-style-type:none;
    height:35px;
    line-height:35px;
    cursor:pointer;
    clear:both;
    padding: 0 5px;
}
.loginDate{
    float:right;
}
.selUser{
    background: #2d8cf0;
    color: #fff;
}
.iconArea{
    height:45px;
    position:relative;
}
.icon{
    height:25px;
    width:25px;
    vertical-align: middle;
    margin-top: -5px;
}
.fl{float:left;}
.fr{float:right;}
.iconDiv{
    position: absolute;
    top:45px;
    background: #fff;
    height: 160px;
    width: 370px;
    z-index: 10;
    box-shadow: 1px 2px 15px #888;
    padding: 5px;
}
.welcome{
    color: #15c02e;
}
.warning{
    color:red;
}
.msg{
    margin:10px 0;
    position:relative;
}
.userTitleOther{
    float: left;
    width: 90px;
    margin-top: 5px;
}
.otherMsgContent{
    float:left;
    margin-left: 10px;
    padding: 10px 20px;
    background: #eaeaea;
    border-radius: 5px;
}
.triangle-left {
    position: absolute;
    left: 80px;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color:#FFF #eaeaea #FFF #FFF ;
    top: 5px;
}
.userTitleSelf{
    float: right;
    width: 90px;
    margin-top: 5px;
    padding-left: 15px;
}
.selfMsgContent{
    float:right;
    margin-right: 10px;
    padding: 10px 20px;
    background: #18cb2f;
    color:#fff;
    border-radius: 5px;
}
.triangle-right {
    position: absolute;
    right: 80px;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: #FFF #FFF #FFF #18cb2f;
    top: 5px;
}
.private{
    background: red;
    color: #fff;
    border-radius: 20px;
    padding: 3px;
}
